<template>
  <div class="dashboard-container">
    <!-- 顶部区域 -->
    <div class="header">
<!--      <img src="@/assets/layout/header.png" class="overview-img" />-->
<!--      <div class="date-time">-->
<!--        <div class="time">16:32:17</div>-->
<!--        <div class="date">2025-5-29</div>-->
<!--      </div>-->
    </div>

    <!-- 底部主区域 -->
    <div class="main-content">
      <!-- 左侧栏 -->
      <div class="left-panel">
        <div class="overview-panel">
          <!-- 标题栏 -->
          <div class="panel-header">
            <img src="../assets/layout/left/image-arrow.png" alt="icon" class="icon" />
            <h2 class="title">概况</h2>
          </div>

          <!-- 图片区域 -->
          <div class="image-container">
            <img src="../assets/layout/left/ship-image.png" alt="ship" />
          </div>

          <!-- 描述文本 -->
          <div class="description">
            <p class="description-text">
              长江口一号古船是一艘清同治年间的贸易商船，也是中国水下考古发现的体量最大、保存最为完整、船载文物数量巨大的木质帆船。
              古船长约38.1米，宽约9.9米，所在水域水深8～10米，船体埋藏于5.5米深淤泥中，已探明有31个舱室。
            </p>
          </div>
        </div>

        <div class="artifact-panel">
          <!-- 标题栏 -->
          <div class="artifact-header">
<!--            <img src="../assets/layout/left/image-arrow.png" alt="icon" class="icon" />-->
<!--            <h4 class="title">文物</h4>-->
<!--            <h4 class="subtitle">船体零部件</h4>-->
            <img src="../assets/layout/left/image-arrow.png" alt="icon" class="icon" />
            <div class="background-container">
              <div class="section1" id="section1">文物</div>
              <div class="section2" id="section2">船体零部件</div>
              <div class="section3" id="section3"></div>
            </div>
          </div>

          <!-- 搜索栏 -->
          <div class="search-bar">
            <i class="search-icon"></i>
            <input type="text" class="search-input" placeholder="输入关键字查询" v-model="keyword" />
          </div>

          <!-- 表格内容 -->
          <div class="table-container">
            <div class="table-header">
              <div class="cell">全部文物</div>
              <div class="cell">年代</div>
              <div class="cell">材质</div>
              <div class="cell">尺寸</div>
            </div>
            <div class="table-body">
              <div class="table-row" v-for="(item, index) in dataList" :key="index">
                <div class="cell">
                  <span v-if="item.star">⭐</span>
                  {{ item.name }}
                </div>
                <div class="cell">{{ item.age }}</div>
                <div class="cell">{{ item.material }}</div>
                <div class="cell">{{ item.size || '-' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间图层区域 -->
      <div class="center-panel">
        <div class="map-area"></div>
        <div class="timeline">
          <span>2022</span>
          <span>2023</span>
          <span class="active-year">2025</span>
        </div>
      </div>
      <!-- 右侧数据区域 -->
      <div class="right-panel">
        <div class="summary-block">
          <h4>数据总览</h4>
          <div class="metric">数据管理：2659</div>
          <div class="metric">古船：423</div>
          <div class="metric">船体零部件：351</div>
          <div class="metric">船载器物：2891</div>
        </div>

        <div class="progress-block">
          <h4>扫描进度</h4>
          <div class="circle">20%</div>
        </div>

        <div class="ratio-block">
          <h4>采集数据类型占比</h4>
          <ul>
            <li>三维模型：586 ↑6%</li>
            <li>激光点云：324 ↑30%</li>
            <li>正射影像：214 ↑14%</li>
            <li>图片：158 ↑7%</li>
            <li>其他：79 ↓3%</li>
          </ul>
        </div>

        <div class="chart-block">
          <h4>入库数据量：1123</h4>
          <div class="btn-group">
            <button>按天</button>
            <button>按周</button>
            <button>按月</button>
          </div>
          <div class="chart-placeholder">[图表区域]</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const keyword = ref('');
const dataList = ref([
  { name: '明代瓷瓶111', age: '明代', material: '瓷器', size: '', star: true },
  { name: '豆青釉青花大瓶', age: '元代', material: '瓷器', size: '', star: false },
  { name: '明代瓷瓶111', age: '明代', material: '瓷器', size: '', star: true },
  { name: '明代瓷瓶111', age: '明代', material: '瓷器', size: '', star: false },
  { name: '明代瓷瓶111', age: '明代', material: '瓷器', size: '', star: false },
  { name: '明代瓷瓶111', age: '明代', material: '瓷器', size: '', star: false },
]);

const filteredList = computed(() => dataList.value.filter((item) => item.name.includes(keyword.value.trim())));
</script>

<style scoped>
.dashboard-container {
  //z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #0a1b2b;
  color: #fff;
}

/* 顶部区域 */
.header {
  z-index: 10;
  //display: flex;
  //justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 154px;
  background-image: url('@/assets/layout/header.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
/*  background: #0d2948;
  background: #061423;*/
}

/* 主体区域（下部分三栏） */
.main-content {
  //z-index: 1;
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧面板 */
.left-panel {
  z-index: 1;
  width: 16%;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  //gap: 12px;
}

/* 中间面板 */
.center-panel {
  flex: 1;
  z-index: -1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 右侧面板 */
.right-panel {
  z-index: 1;
  width: 23%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  //gap: 12px;
}

/*  左侧面板 - 概览  Begin */
.overview-panel {
  //width: 400px;
  background: rgba(0, 34, 51, 0.8);
  border: 1px solid #0ff;
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  display: flex;
  flex-direction: column;
  /* 顶部标题栏 */
  .panel-header {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
  }
  .icon {
    width: 24px;
    margin-right: 8px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }

  /* 图片区域 */
  .image-container {
    width: 100%;
    margin-bottom: 12px;
  }

  .image-container img {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
  }

  /* 描述文本 */
  .description {
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
    color: #d0f0ff;
    background-image: url('@/assets/layout/left/bg-decoration.png');
    background-repeat: no-repeat;
  }
}

/*  左侧面板 - 概览  End  */

/* 左侧面板 - 零件列表  Begin */
.artifact-panel {
  width: 385px;
  height: 800px;
  padding: 12px;
  /* background: rgba(0, 40, 60, 0.85); */
  background: rgba(0, 34, 51, 0.8);
  border: 1px solid #00eaff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  /* 标题区域 */
  .artifact-header {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    background-image: url('@/assets/layout/left/bg-artifact.png');
  }
  .title {
    font-size: 16px;
    color: #00f0ff;
    margin-right: 8px;
  }

  .subtitle {
    font-size: 16px;
    color: #ccc;
  }

  .icon {
    width: 24px;
    //margin-right: 8px;
  }

  .background-container {
    width: 400px; /* 宽度 */
    z-index: 10;
    display: flex;
    justify-content: space-around;
    height: 32px;
    background-image: url('@/assets/layout/left/bg-artifact.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .section1 {
    flex: 1; /* 每个部分占据相同的空间 */
    font-size: 16px;
    margin-left: 40px; /* 添加外边距以分隔各个部分 */
  }

  .section2 {
    flex: 1; /* 每个部分占据相同的空间 */
    font-size: 16px;
    margin-left: -130px; /* 添加外边距以分隔各个部分 */
  }



  /* 搜索栏样式 */
  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .search-icon {
    margin-right: 6px;
  }

  .search-input {
    flex: 1;
    background: transparent;
    border: 1px solid #3cd;
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    outline: none;
  }

  /* 表格区域 */
  .table-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
  }

  .table-header,
  .table-row {
    display: flex;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .table-header {
    font-weight: bold;
    color: #00faff;
  }

  .cell {
    flex: 1;
    text-align: left;
    font-size: 10px;
  }
}

/* 左侧面板 - 零件列表 End */
</style>
